<template>
  <div>
      <div id="radarChart" ref="radarChart" style="width: 800px; height: 400px; margin: 0 auto;" > 

      </div>
  </div>
</template>

<script>
export default {
  name: '2304BIndex',
  data() {
    return {
      
    };
  },

  mounted() {
      this.makeRadarChart();
  },

  methods: {
    makeRadarChart() {
      //  准备操作实例
      let mychart=this.$echarts.init(document.getElementById('radarChart'))
      // 准备配置项
      let option = {
          title: {
            text: '综合评估',
            textStyle:{
              color:"#129a9c"
            }
          },
          
          legend: {
            data: ['能量消耗', '运行量',"运动强度","运动时长","风险评估"]
          },
          radar: {  //雷达的配置项目
            // shape: 'circle',
            indicator: [
              { name: '能量集中', max: 6500 },
              { name: '运行量', max: 16000 },
              { name: '运动强度', max: 30000 },
              { name: '风险评估', max: 38000 },
              { name: '运动时长', max: 52000 },
            ]
          },
          series: [
            {
              name: '综合评估',
              type: 'radar',
              data: [
                {
                  value: [4200, 3000, 20000, 35000, 50000]
                }
              ],
              itemStyle:{
                color:"#129a9c"
              },
              areaStyle:{
                color:"#129a9c"
              }
               
            }
          ]
        };
      // 将配置项设置给实例
      mychart.setOption(option)
        // 监听窗口变化  调用ecahrt实例的 resize方法
      window.addEventListener('resize',()=>mychart.resize())
    }
  },
  beforeDestroy() {
    // 离开组件 移除全局的事件 resize
     window.removeEventListener('resize',()=>this.$refs.radarChart.__echarts_instance__.resize)
  },
};
</script>